<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="../assets/vue.js"></script>
	<title>methods Option</title>
</head>
<body>
<h1>methods Option</h1>
<hr>
<div id="app">
	<p>今日温度{{wd}}</p>
	<p>建议：{{jy}}</p>
	<div>
		<button @click="add">升高</button>
		<button @click="sub">降低</button>
	</div>
</div>

<script type="text/javascript">
	var jyArr = ['短袖','夹克长裙','羽绒服'];

	var app=new Vue({
		el:'#app',
		data:{
			wd:16,
			jy:'夹克长裙',
		},
		methods:{
			add:function () {
				this.wd += 5;
			},
			sub:function () {
				this.wd-=5;
			}
		},
		/*watch:{
			wd:function (newVal,oldVal) {
				if(newVal >= 26){
					this.jy = jyArr[0];
				}else if(newVal < 26 && newVal >= 0){
					this.jy = jyArr[1];
				}else {
					this.jy = jyArr[2];
				}
			}
		}*/
	});

	app.$watch('wd',function(newVal,oldVal) {
		if(newVal >= 26){
			this.jy = jyArr[0];
		}else if(newVal < 26 && newVal >= 0){
			this.jy = jyArr[1];
		}else {
			this.jy = jyArr[2];
		}
	});
</script>
</body>
</html>